<template>
    <div id="forgetPassword">
        <div class="top">
            <div class="content">
                <ul>
                    <li class="activeOne">1、手机号/邮箱验证</li>
                    <img src="../image/fangxiang.png" alt="">
                    <li :class="active==1?'activeTwo':''">2、设置新密码</li>
                </ul>
                <ol>
                    <!-- 手机号/邮箱验证 -->
                    <li v-if="active == 0">
                        <div class="verifyNumber">
                            <div>手机号/邮箱：</div>
                            <el-input v-model="verifyInput" placeholder="请输入手机号/邮箱"></el-input>
                        </div>
                        <div class="verification">
                            <div class="left">验证：</div>
                            <el-input v-model="verifyInput" placeholder="请输入验证码"></el-input>
                            <div class="right">{{verifyCode}}</div>
                        </div>
                        <div class="verificationCode">
                            <div class="left">验证码：</div>
                            <el-input v-model="verifyCodeInput" placeholder="请输入短信/邮箱验证码"></el-input>
                            <div class="sendCode" v-if="verifyTimeShow" @click="verifySendCode">发送验证码</div>
                            <div class="anewSendCode" v-if="!verifyTimeShow" @click="verifySendCode">重新发送（{{verifyTime}}）</div>
                        </div>
                        <div class="newPassword" @click="newPassword()">设置新密码</div>
                    </li>
                    <li v-if="active == 1">
                        <!-- 设置新密码 -->
                        <div class="verifyNumber">
                            <div>新密码：</div>
                            <el-input v-model="newPasswordInput" placeholder="请输入密码"></el-input>
                        </div>
                        <div class="verifyNumber">
                            <div>确认密码：</div>
                            <el-input v-model="confirmPasswordInput" placeholder="请再次输入密码"></el-input>
                        </div>
                        <div class="confirm" @click="confirm">确定</div>
                    </li>
                </ol>
                <!-- 成功提示 -->
                <div class="successPrompt" v-if="successPrompt">
                    <img src="../image/chenggong.png" alt="">
                    <div class="hint">密码设置成功</div>
                    <div class="dotted"></div>
                    <div class="jump" v-if="successPromptTimeShow" @click="logIn">去登陆！立即跳转（{{successPromptTime}}）</div>
                </div>
            </div>
        </div>
        <!-- 空白 -->
        <div class="null"></div>
    </div>
</template>

<script>
export default {
	data() {
		return {
            active:0, // 切换选项卡
            // 手机号注册
            verifyInput: "", // 输入的手机号/邮箱
            verifyInput: "", // 输入的验证码
            verifyCode: "0813", // 验证的图形码
            verifyCodeInput: "", // 输入的短信/邮箱验证码
            verifyTime: 60,
            verifyTimeShow: true, // 控制验证码的显示隐藏
            // 邮箱注册
            newPasswordInput: "", // 输入的密码
            confirmPasswordInput: "", // 输入的确认密码
            // 成功提示
            successPrompt: false,
            successPromptTime: 3,
            successPromptTimeShow: false, // 控制验证码的显示隐藏
            active:0,
		};
	},
    mounted(){},
	methods: {
        // 手机号/邮箱验证发送验证码
        verifySendCode(){
			// console.log("手机号注册发送验证码")
            this.verifyTimeShow = false
            this.timer = setInterval(()=>{
                this.verifyTime--
                if(this.verifyTime === 0){
                    this.verifyTimeShow = true
                    clearInterval(this.timer)
                }
            },1000)
		},
        // 切换
        newPassword(){
           this.active = 1
        },
        // 修改成功提示
        confirm(){
            // console.log("注册成功提示")
            this.successPrompt = true
            this.successPromptTimeShow = true
            this.timer = setInterval(()=>{
                this.successPromptTime--
                if(this.successPromptTime === 0){
                    this.successPromptTime = 3
                    clearInterval(this.timer)
                    this.$router.push("/logIn")
                }
            },1000)
        },
		// 点击跳转到登录页面
		logIn(){
			// console.log("跳转到登录页面")
            this.successPromptTime = 3
            clearInterval(this.timer)
			this.$router.push("/logIn")
		},
    },
}
</script>

<style scoped lang="less">
@media screen and (min-width: 1400px){    
    #forgetPassword{
        min-width: 1200px;
        max-width: 1400px;
        margin: 0 auto;
        box-sizing: border-box;
        position: relative;
        .top{
            height: 800px;
            display: flex;
            align-items: center;
            background: url("../image/beijingtu.png") no-repeat;
            background-size:cover;
            .content{
                width: 35%;
                margin-left: 30%;
                border-radius: 20px;
                overflow: hidden;
                position: relative;
                ul{
                    display: flex;
                    .activeOne{
                        color: white;
                        background: url("../image/yanzheng.png") no-repeat 100%;
                    }
                    .activeTwo{
                        color: white;
                        background: url("../image/yanzhengTwo.png") no-repeat 100%;
                    }
                    li{
                        flex: 1;
                        line-height: 40px;
                        text-align: center;
                        font-size: 16px;
                        color: black;
                        background: url("../image/weiyanzheng.png") no-repeat 100%;
                    }
                    img{
                        width: 54px;
                        height: 40px;
                        position: absolute;
                        top: 0%;
                        left: 44%;
                    }
                }
                ol{
                    width: 100%;
                    margin-top: 2%;
                    background: url("../image/background.png") no-repeat 100%;
                    li{
                        padding: 5%;
                        color: #666;
                        // 手机号
                        .verifyNumber{
                            margin-bottom: 5%;
                            font-size: 16px;
                            display: flex;
                            div{
                                flex: 1;
                                display: flex;
                                align-items: center;
                            }
                            .el-input{
                                flex: 3;
                            }
                        }
                        // 验证
                        .verification{
                            margin-bottom: 5%;
                            font-size: 16px;
                            display: flex;
                            .left{
                                flex: 2;
                                display: flex;
                                align-items: center;
                            }
                            .el-input{
                                flex: 3;
                            }
                            .right{
                                margin-left: 3%;
                                flex: 3;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                border: 1px dotted #ccc;
                            }
                        }
                        // 验证码
                        .verificationCode{
                            margin-bottom: 5%;
                            font-size: 16px;
                            display: flex;
                            .left{
                                flex: 2;
                                display: flex;
                                align-items: center;
                            }
                            .el-input{
                                flex: 3;
                            }
                            .sendCode{
                                margin-left: 3%;
                                flex: 3;
                                text-align: center;
                                line-height: 40px;
                                font-size: 18px;
                                color: white;
                                background: #F29418;
                            }
                            .anewSendCode{
                                margin-left: 3%;
                                flex: 3;
                                text-align: center;
                                line-height: 40px;
                                font-size: 18px;
                                color: white;
                                background: url("../image/weixuanzhong.png") no-repeat 100%;
                            }
                        }
                        // 设置新密码按钮
                        .newPassword{
                            width: 100%;
                            text-align: center;
                            line-height: 50px;
                            font-size: 18px;
                            color: white;
                            margin: 17% 0% 5% 0%;
                            background: #F29418;
                        }
                        // 确定按钮
                        .confirm{
                            width: 100%;
                            text-align: center;
                            line-height: 50px;
                            font-size: 18px;
                            color: white;
                            margin: 30% 0% 5% 0%;
                            background: #F29418;
                        }
                    }
                }
                // 成功提示
                .successPrompt{
                    width: 100%;
                    border-bottom-left-radius: 20px;
                    border-bottom-right-radius: 20px;
                    overflow: hidden;
                    background: url("../image/background.png") no-repeat 100%;
                    text-align: center;
                    position: absolute;
                    top: 12%;
                    left: 0%;
                    img{
                        width: 15%;
                        margin-top: 10%;
                    }
                    .hint{
                        font-size: 22px;
                        margin: 2% 0% 10% 0%;
                    }
                    .dotted{
                        border-top: 2px dotted black;
                        margin: 7% 0% 7% 0%;
                    }
                    .jump{
                        font-size: 16px;
                        color: #F29418;
                        margin-bottom: 22%;
                    }
                }
            }
        }
        .null{
            width: 100%;
            height: 104px;
            background: white;
            position: absolute;
            bottom: -13%;
            left: 0%;
        }
    }
}



@media screen and (max-width: 1400px){    
    #forgetPassword{
        min-width: 1200px;
        max-width: 1400px;
        margin: 0 auto;
        box-sizing: border-box;
        position: relative;
        .top{
            height: 750px;
            display: flex;
            align-items: center;
            background: url("../image/beijingtu.png") no-repeat;
            background-size:cover;
            .content{
                width: 30%;
                margin-left: 35%;
                border-radius: 20px;
                overflow: hidden;
                position: relative;
                ul{
                    display: flex;
                    .activeOne{
                        color: white;
                        background: url("../image/yanzheng.png") no-repeat 100%;
                    }
                    .activeTwo{
                        color: white;
                        background: url("../image/yanzhengTwo.png") no-repeat 100%;
                    }
                    li{
                        flex: 1;
                        line-height: 36px;
                        text-align: center;
                        font-size: 14px;
                        color: black;
                        background: url("../image/weiyanzheng.png") no-repeat 100%;
                    }
                    img{
                        width: 54px;
                        height: 36px;
                        position: absolute;
                        top: 0%;
                        left: 43%;
                    }
                }
                ol{
                    width: 100%;
                    margin-top: 1%;
                    background: url("../image/background.png") no-repeat 100%;
                    li{
                        padding: 3%;
                        color: #666;
                        // 手机号
                        .verifyNumber{
                            margin-bottom: 3%;
                            font-size: 14px;
                            display: flex;
                            div{
                                flex: 1;
                                display: flex;
                                align-items: center;
                            }
                            .el-input{
                                flex: 3;
                            }
                        }
                        // 验证
                        .verification{
                            margin-bottom: 3%;
                            font-size: 14px;
                            display: flex;
                            .left{
                                flex: 2;
                                display: flex;
                                align-items: center;
                            }
                            .el-input{
                                flex: 3;
                            }
                            .right{
                                margin-left: 2%;
                                flex: 3;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                border: 1px dotted #ccc;
                            }
                        }
                        // 验证码
                        .verificationCode{
                            margin-bottom: 3%;
                            font-size: 14px;
                            display: flex;
                            .left{
                                flex: 2;
                                display: flex;
                                align-items: center;
                            }
                            .el-input{
                                flex: 3;
                            }
                            .sendCode{
                                margin-left: 2%;
                                flex: 3;
                                text-align: center;
                                line-height: 40px;
                                font-size: 16px;
                                color: white;
                                background: #F29418;
                            }
                            .anewSendCode{
                                margin-left: 2%;
                                flex: 3;
                                text-align: center;
                                line-height: 40px;
                                font-size: 16px;
                                color: white;
                                background: url("../image/weixuanzhong.png") no-repeat 100%;
                            }
                        }
                        // 设置新密码按钮
                        .newPassword{
                            width: 100%;
                            text-align: center;
                            line-height: 40px;
                            font-size: 16px;
                            color: white;
                            margin: 13% 0% 5% 0%;
                            background: #F29418;
                        }
                        // 确定按钮
                        .confirm{
                            width: 100%;
                            text-align: center;
                            line-height: 40px;
                            font-size: 16px;
                            color: white;
                            margin: 30% 0% 5% 0%;
                            background: #F29418;
                        }
                    }
                }
                // 成功提示
                .successPrompt{
                    width: 100%;
                    border-bottom-left-radius: 20px;
                    border-bottom-right-radius: 20px;
                    overflow: hidden;
                    background: url("../image/background.png") no-repeat 100%;
                    text-align: center;
                    position: absolute;
                    top: 12%;
                    left: 0%;
                    img{
                        width: 15%;
                        margin-top: 8%;
                    }
                    .hint{
                        font-size: 20px;
                        margin: 2% 0% 8% 0%;
                    }
                    .dotted{
                        border-top: 2px dotted black;
                        margin: 6% 0% 6% 0%;
                    }
                    .jump{
                        font-size: 14px;
                        color: #F29418;
                        margin-bottom: 20%;
                    }
                }
            }
        }
        .null{
            width: 100%;
            height: 98px;
            background: white;
            position: absolute;
            bottom: -13%;
            left: 0%;
        }
    }
}
</style>